<template>
  <h2>插槽</h2>
  <slot-main :type="type">
    <!-- 默认插槽可以不写template,但是如果内部有传值到外部用template，用3种写法，#是v-slot:的简写 -->
    <!-- <p>首页</p> -->
    <!-- <template #default><p>首页</p></template> -->
    <!-- <template><p>首页</p></template> -->
    <!-- 具名插槽带上名字 #是v-slot:的简写-->
    <template #default="{ num3 }">
      <div>
        <p>首页---传进来的值：{{ num3 }}</p>
        <el-divider></el-divider>
      </div>
    </template>
    <template v-slot:name1="{ num1 }">
      <p>name1插槽---传进来的值：{{ num1 }}</p>
    </template>
    <template #name2="{ num2 }">
      <p>name2插槽---传进来的值：{{ num2 }}</p>
    </template>
  </slot-main>
</template>

<script setup>
import SlotMain from './components/slot-main'
import { ref } from 'vue'
const type = ref('success')
</script>

<style  lang="scss" scoped>

</style>